<!-- 会议记录 -->
<template>
  <div>
    <el-row>
      <el-col :span="24" class="products">
        <div class="productscontainer">
          <div
            class="meetingitem"
            v-for="(meetingitem,meetingindex) in meetinglist"
            :key="meetingindex"
          >
            <img src="../../assets/images/hoverpic.png" class="hoverpic" />
            <div class="title animated fadeInUp" v-if="meetingitem.name">{{meetingitem.name}}</div>
            <div class="productcontent">
              <img :src="require(`../../assets/images/bg${meetingindex%5}.jpg`)" class="productbg" />
              <div class="descard animated fadeIn">
                <div class="des">
                  <div class="short">{{meetingitem.addr}}</div>
                  <div class="age">{{meetingitem.desc}}</div>
                </div>
                <div class="price">{{meetingitem.startTime | dateFormat}}</div>

                <router-link
                  :to="{
                  path:'/WriteNote',
                  query:{
                    content:meetingitem
                  }
                  }"
                >
                  <el-button round size="small" class="startstudy" v-if="!meetingitem.note">去填写</el-button>
                </router-link>
                <el-button
                  round
                  size="small"
                  class="checkbutton"
                  v-if="meetingitem.note"
                  @click="showmeetingnote(meetingitem.note,meetingitem)"
                >查看</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
    </el-row>

    <at-modal v-model="shownotedialog" height="60%" cancelText="取消" okText="确认" title="会议记录">
      <div class="dialogcontent">
        <div class="meetingintro">
          <div class="intro">
            <div class="title">会议名称：</div>
            <div class="mvalue">{{currentmeeting.name}}</div>
          </div>
          <div class="intro">
            <div class="title">会议描述：</div>
            <div class="mvalue">{{currentmeeting.desc}}</div>
          </div>
          <div class="intro">
            <div class="title">会议时间：</div>
            <div
              class="mvalue"
            >{{currentmeeting.startTime|dateFormat}}~{{currentmeeting.endTime|dateFormat}}</div>
          </div>
          <div class="intro" v-if="currentmeeting.room">
            <div class="title">会议地点：</div>
            <div class="mvalue">{{currentmeeting.room.name}}</div>
          </div>
          <div class="intro" v-if="currentmeeting.host">
            <div class="title">会议发起者：</div>
            <div class="mvalue">{{currentmeeting.host.nick}}</div>
          </div>
        </div>
        <el-steps :active="1" align-center style="margin-top:20px">
          <el-step
            :title="`步骤${key+1}`"
            :description="value"
            v-for="(value,key,index) in shownote.steps"
            :key="index"
          ></el-step>
        </el-steps>
      </div>
    </at-modal>
  </div>
</template>

<script>
import { back, getNowFormatDate } from "../../assets/js/common";
import { mapState, mapMutations } from "vuex";
import { setCookie, getCookie, removeCookie } from "../../assets/js/common";
import { fetch, post } from "../../config/request";
export default {
  data() {
    return {
      meetinglist: [],
      size: 10,
      shownote: [],
      shownotedialog: false,
      currentmeeting: ""
    };
  },

  components: {},
  computed: {
    ...mapState(["meetings"])
  },
  created() {
    if (this.$route.query.steps) {
      this.submitnote(this.$route.query.steps, this.$route.query.meeting);
    }
    let meetingstate = this.$store.state.meetings;
    if (meetingstate.length == 0) {
      this.getlist();
    } else {
      this.meetinglist = this.meetings;
    }
  },

  methods: {
    showmeetingnote(note, meeting) {
      this.shownotedialog = true;
      this.shownote = note;
      this.currentmeeting = meeting;
    },
    submitnote(steps, meeting) {
      console.log(meeting);
      let meetinglist = this.meetings;
      for (let i = 0; i < meetinglist.length; i++) {
        if (meetinglist[i].ID == meeting.ID) {
          this.$set(meetinglist[i], "note", {
            steps: steps
          });
          break;
        }
      }
      this.changeMeetings({
        meetings: meetinglist
      });
    },
    async getlist() {
      let meetinglist = [];
      let total = await this.calculatepage();
      let count = Math.ceil(total / this.size);
      for (let i = 0; i < count; i++) {
        let pushdata = await this.getmeetings(i + 1);
        meetinglist = meetinglist.concat(pushdata);
      }
      this.changeMeetings({
        meetings: meetinglist
      });
      this.meetinglist = meetinglist;
    },
    getmeetings(page) {
      return new Promise((resolve, reject) => {
        fetch("/api/api/user/meeting?size=" + this.size + "&page=" + page).then(
          res => {
            let list = res.data.meetings.list;
            let total = res.data.meetings.total;
            resolve(res.data.meetings.list);
          }
        );
      });
    },
    calculatepage() {
      return new Promise((resolve, reject) => {
        fetch("/api/api/user/meeting?size=" + this.size).then(res => {
          resolve(res.data.meetings.total);
        });
      });
    },
    mback() {
      back();
    },
    ...mapMutations(["changeMeetings"])
  }
};
</script>
<style lang="scss">
$primary-color: #6190e8;
.el-form-item {
  display: flex;
}
.el-form-item__content {
  margin-left: 0 !important;
}

.productscontainer {
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 20px;
  border-bottom: 1px dashed rgba(204, 204, 204, 0.432);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .meetingitem:hover .hoverpic {
    animation: dogshow 0.8s 0s 1 forwards;
  }
  @keyframes dogshow {
    0% {
      top: -40px;
      opacity: 0;
    }
    50% {
      top: -70px;
      opacity: 1;
    }
    100% {
      top: -60px;
      opacity: 1;
    }
  }
  .meetingitem {
    width: 23%;
    min-width: 200px;
    margin: 10px;
    box-sizing: border-box;
    height: 320px;
    border-radius: 20px;
    background: white;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    position: relative;
    .hoverpic {
      position: absolute;
      width: 70px;
      opacity: 0;
      top: 0;
      right: 10px;
    }
    .title {
      text-align: left;
      font-size: 20px;
      font-weight: bold;
      padding: 15px 10px;
      padding-left: 10%;
    }
    .productcontent {
      flex: 1;
      width: 100%;
      border-radius: 20px;
      background-size: cover;
      position: relative;
      overflow: hidden;
      .productbg {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        top: 0;
        bottom: 0;
        left: 0;
        opacity: 0.7;
      }
      .descard {
        width: 80%;
        background: #ffffffc0;
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: left;
        padding: 15px 10px;
        border-radius: 10px;
        .des {
          font-size: 14px;
          .short,
          .age {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
          }
          .short {
            font-weight: bold;
          }
          .age {
            color: rgb(73, 73, 73);
            font-size: 12px;
            margin-top: 5px;
          }
        }
        .price {
          font-weight: bold;
          white-space: nowrap;
          display: flex;
          align-items: flex-end;
          color: #668fdc;
          font-family: fantasy;
          margin-top: 10px;
        }
        .startstudy,
        .checkbutton {
          width: 100px;
          margin-top: 20px;
          background: $primary-color;
          color: white;
          transition: transform 0.5s;
        }

        .startstudy:hover,
        .checkbutton:hover {
          transform: scale(1.3);
        }
        .checkbutton {
          background: white;
          border: 1px solid $primary-color;
          color: $primary-color;
        }
      }
    }
  }
}
.dialogcontent {
  .meetingintro {
    border-bottom: 1px solid rgb(240, 240, 240);
    padding: 10px 0;
    .intro {
      display: flex;
      align-items: center;
      white-space: nowrap;
      margin: 5px 0;
      .mvalue {
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>